<template>
	<view class="yb-flex yb-image-wrapper" 
	:id="customIdSync"
	:class="customClassSync"
	:style="customStyleSync">
		<yb-appear
		:target="target"
		:disabled="!lazyLoad || disableLazyLoad"
		custom-class="yb-flex-1"
		@appear="onAppear"
		@disappear="onDisappear">
			<image :lazy-load="lazyLoad" @load="onload" @error="onerror" ref="image"
			class="yb-image" :src="url" :mode="mode"
			:class="{
				'yb-flex-1': mode != 'widthFix'
			}"
			:style="imageStyle"></image>
			<view class="yb-image-box yb-flex yb-align-center yb-justify-center" ref="ybImageBox" :class="boxClass" :style="boxStyle">
				<slot name="loading" v-if="loading">
					<text class="tip" :style="{color: optionsSync.tipColor, 'font-size': Util.pixelunit(optionsSync.tipSize)}">加载中</text>
				</slot>
				<slot name="error" v-if="error">
					<text class="tip" :style="{color: optionsSync.tipColor,  'font-size': Util.pixelunit(optionsSync.tipSize)}">加载失败</text>
				</slot>
			</view>
		</yb-appear>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	// #ifdef APP-NVUE
	const animation = uni.requireNativePlugin('animation')
	// #endif
	export default {
		mixins: [ComponentMixin],
		props: {
			//图片链接
			src: {
				type: String,
				default: ''
			},
			//裁剪模式
			mode: {
				type: String,
				default: ''
			},
			//懒加载
			lazyLoad: {
				type: Boolean,
				default: false
			},
			waterfall: {
				type: Boolean,
				default: false
			},
			//圆角大小
			borderRadius: {
				type: [Number,String],
				default: 0
			},
			borderTopLeftRadius: {
				type: [Number,String],
				default: 0
			},
			borderTopRightRadius: {
				type: [Number,String],
				default: 0
			},
			borderBottomRightRadius: {
				type: [Number,String],
				default: 0
			},
			borderBottomLeftRadius: {
				type: [Number,String],
				default: 0
			},
			//图片加载失败展示的默认图片
			defaultSrc: {
				type: String,
				default: ''
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			},
			//懒加载对应的节点
			target: {
				type: String,
				default: 'viewport'
			},
			//图片渐变周期
			duration: {
				type: Number,
				default: 500
			}
		},
		computed: {
			Util () {
				return Util
			},
			optionsSync () {
				return Object.assign({}, {
					//背景色
					bgColor: '#E0E0E0',
					//提示颜色
					tipColor: '#333333',
					tipSize: 30
				}, this.options)
			},
			boxStyle () {
				return this.filterStyle(
					{
						position: 'absolute',
						top: 0,
						left: 0,
						right: 0,
						bottom: 0,
						'background-color': this.optionsSync.bgColor,
						// #ifndef APP-NVUE
						'transition-duration': this.duration + 'ms',
						// #endif
					}
				) + this.borderRadiusStyle
			},
			imageStyle () {
				return this.mode != 'aspectFit' ? this.borderRadiusStyle : ''
			},
			borderRadiusStyle () {
				return this.filterStyle(
					this.borderRadius > 0 ? {
						borderRadius: Util.pixelunit(this.borderRadius)
					} : {
						borderTopLeftRadius: Util.pixelunit(this.borderTopLeftRadius),
						borderTopRightRadius: Util.pixelunit(this.borderTopRightRadius),
						borderBottomRightRadius: Util.pixelunit(this.borderBottomRightRadius),
						borderBottomLeftRadius: Util.pixelunit(this.borderBottomLeftRadius)
					}
				)
			}
		},
		data() {
			return {
				url: '',
				loading: true,
				error: false,
				disableLazyLoad: false,
				boxClass: ''
			}
		},
		mounted() {
			if ( this.src ) {
				// #ifdef APP-NVUE
				this.url = this.src
				// #endif
				// #ifndef APP-NVUE
				if ( !this.lazyLoad ) {
					this.url = this.src
				}
				// #endif
			}
		},
		methods: {
			onload(e) {
				this.$nextTick(function () {
					this.disableLazyLoad = true
					this.error = false
					this.loading = false
					this.$emit('load', e)
					// #ifdef APP-NVUE
					animation.transition(this.$refs.ybImageBox,{
					    styles:{
					      opacity: 0
					    },
						duration: this.duration, //ms
						needLayout: true
					})
					// #endif
					// #ifndef APP-NVUE
					this.boxClass = 'yb-image-box-hide'
					if ( this.waterfall ) {
						let parent = Util.getParent('YbWaterfallItem', this);
						parent.getSize()
					}
					// #endif
				})
			},
			onerror(e) {
				this.$nextTick(function () {
					if ( this.defaultSrc ) {
						this.url = this.defaultSrc;
					} else {
						this.loading = false
						this.error = true;
						this.$emit('error', e);
						// #ifdef APP-NVUE
						animation.transition(this.$refs.ybImageBox,{
						    styles:{
						      opacity: 1
						    },
							duration: this.duration, //ms
							needLayout: true
						})
						// #endif
						// #ifndef APP-NVUE
						this.boxClass = 'yb-image-box-show'
						if ( this.waterfall ) {
							let parent = Util.getParent('YbWaterfallItem', this);
							parent.onerror()
						}
						// #endif
					}
				})
			},
			onAppear () {
				// #ifndef APP-NVUE
				if ( !this.url) {
				  this.url = this.src;
				}
				// #endif
			},
			onDisappear () {
				// #ifndef APP-NVUE
				if ( this.url) {
				  this.url = '';
				  this.loading = true
				  this.error = false;
				}
				// #endif
			}
		},
		watch: {
			src (newVal) {
				// #ifdef APP-NVUE
				this.url = newVal
				// #endif
				// #ifndef APP-NVUE
				if ( !this.lazyLoad ) {
					this.url = newVal
				}
				// #endif
			}
		}
	}
</script>

<style scoped>
	.yb-image-wrapper {
		position: relative;
	}
	.yb-image {
		/* #ifndef APP-NVUE */
		width: 100%;
		flex-shrink: 0;
		/* #endif */
	}
	/* #ifndef APP-NVUE */
	/deep/ .yb-image > div {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	/* #endif */
	/* #ifndef APP-NVUE */
	.yb-image-box {
		transition-property: opacity;
	}
	.yb-image-box-show {
		opacity: 1;
	}
	.yb-image-box-hide {
		opacity: 0;
	}
	/* #endif */
</style>
